<template>
  <div class="internal">
    <navbar :text="$route.params.text"></navbar>
    <div class="content">
      <div class="top boder-top">
        <img :src="getinfo.img" alt="" class="img1" />
        <div class="right-top">
          <span class="name">{{ getinfo.name }}</span>
          <span
            ><img
              src="https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E5%8F%B7%E6%BA%90/u428.png"
              class="img2"
          /></span>
          <span class="catename">{{ getinfo.catename }}</span>
        </div>
        <p>{{ getinfo.context }}</p>
        <img
          src="https://cdn7.axureshop.com/demo/1763441/images/%E9%80%89%E6%8B%A9%E6%97%B6%E6%AE%B5/u514.png"
          class="img3"
        />
      </div>
      <div class="info">
        <div class="infoname">{{ $route.params.itemtext }}</div>
        <div class="infoday">{{ day }}</div>
      </div>
      <div class="weeks">
        <div
          class="weekltem border-top"
          v-for="(item, index) in list1"
          :key="item"
        >
          <span ref="timer">{{ item }}</span>
          <span class="choke" @click="reservateAction(index)">预约</span>
        </div>
        <div class="weekltem border-top" v-for="item in list2" :key="item">
          <span>{{ item }}</span>
          <span class="choke1">约满</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../../components/navbar.vue";
import { mapState } from "vuex";
import { Dialog } from "vant";
import axios from "axios";
export default {
  components: {
    navbar,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      id: "",
      item: [],
      list1: ["08：00-08：30", "08：30-09：00"],
      list2: [
        "09：00-09：30",
        "09：30-10：00",
        "10：00-10：30",
        "10：30-11：00",
      ],
    };
  },
  methods: {
    //预约的点击事件
    reservateAction(index) {
      console.log(1);
      // 时间
      let timer = this.$refs.timer[index].innerHTML;

      console.log(timer);
      // console.log("时间：", this.day);
      let ss = this.day.indexOf(" ");
      // 日期
      let day = this.day.substr(0, ss);
      // 时段
      let period = this.day.substring(this.day.length - 2);
      // console.log("时段：", period);
      // console.log(day, "---------");
      // console.log("科室：", this.$route.params.itemtext);
      // console.log("医生：", this.getinfo.name);
      // 科室
      let department = this.$route.params.itemtext;
      // 医生
      let doctor = this.getinfo.name;
      // 职务
      let position = this.getinfo.catename;
      Dialog.confirm({
        title: "",
        message: "是否建档？",
      })
        .then(async () => {
          // on confirm
          //获取用户的建档信息
          try {
            let res = await axios.request({
              method: "post",
              url: "/api/patient/getcardinfo",
              headers: {
                Authorization: "Bearer " + localStorage.getItem("token"),
              },
            });
            console.log(res);
            // 传入仓库
            this.$store.commit("doctor/orderDetails", {
              timer,
              day,
              period,
              doctor,
              department,
              position,
            });
            this.$router.push({
              name: "ConfirmRegistrationInformation",
              params: { text: "确认挂号信息" },
            });
            //已建档
          } catch (error) {
            //未建档
            Dialog.confirm({
              title: "你还未建档",
              message: "是否前往建档?",
            })
              .then(() => {
                this.$router.push({
                  name: "FilingInstructions",
                });
              })
              .catch(() => {});
            return;
          }
        })
        .catch(() => {});
    },
  },
  computed: {
    getinfo() {
      let list = JSON.parse(localStorage.getItem("vuex"));
      console.log(list);
      let res = null;
      list.doctor.doctorinfo.forEach((item) => {
        if (item._id == this.id) {
          res = item;
        }
      });
      list.DoctorList.expertDeam.forEach((item) => {
        if (item._id == this.id) {
          res = item;
        }
      });
      return res;
    },
    ...mapState("doctor", ["day"]),
  },
  created() {
    this.id = this.$route.params.id;
    this.$store.dispatch("doctor/cardinfoData");
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
@function vw($px) {
  @return ($px/375) * 100vw;
}
.content {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 1;
  width: 100%;
  .top {
    position: relative;
    height: vw(100);
    background: rgba(255, 255, 255, 1);
    width: 100%;
    .img1 {
      position: absolute;
      left: 18px;
      top: 20px;
      width: 20px;
      height: 22px;
    }
    .right-top {
      position: absolute;
      top: vw(12);
      display: flex;
      .name {
        font-family: "微软雅黑 Bold", "微软雅黑";
        font-weight: 700;
        font-style: normal;
        color: #333;
        font-size: vw(15);
        margin-left: vw(60);
      }
      .img2 {
        margin: 0 vw(5);
      }
      .catename {
        font-family: "MicrosoftYaHei", "微软雅黑";
        font-weight: 400;
        font-style: normal;
        color: #999999;
        font-size: vw(14);
      }
    }
    p {
      width: vw(257);
      height: vw(32);
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(12);
      color: #999999;
      position: absolute;
      left: vw(60);
      top: vw(40);
    }
    .img3 {
      position: absolute;
      right: vw(15);
      top: 50%;
      transform: translateY(-50%);
      width: vw(7);
      height: vw(12);
    }
  }
  .info {
    position: relative;
    width: 100%;
    height: vw(92);
    margin-top: vw(10);
    background: rgba(255, 255, 255, 1);
    .infoname {
      position: absolute;
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(16);
      font-size: #333;
      left: vw(15);
      top: vw(15);
    }
    .infoday {
      color: #2ec7c9;
      font-family: "MicrosoftYaHei", "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: vw(14);
      position: absolute;
      left: vw(15);
      top: vw(50);
    }
  }
  .weeks {
    margin-top: vw(10);
    width: 100%;
    background: rgba(255, 255, 255, 1);
    .weekltem {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: vw(53);
      .choke {
        width: vw(46);
        height: vw(25);
        background: rgba(46, 199, 201, 1);
        text-align: center;
        line-height: vw(25);
        border-radius: vw(5);
        color: #fff;
      }
      .choke1 {
        width: vw(46);
        height: vw(25);
        text-align: center;
        line-height: vw(25);
        color: #999 !important;
      }
    }
    span {
      font-size: vw(14);
      margin: 0 vw(20);
    }
  }
}
</style>
